import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  Image,
  TouchableOpacity,
  Text,
  TextInput
} from 'react-native'

import NavBar from '../../components/PublicHeader';


export default class details extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 标题
      title: "自我展示",
      returnIcon: require("../../assets/images/iconResources/unsplash_ka.png"),
      // 相册列表
      detailsDatas: [
        this.props.navigation.state.params.albumDatasHeadPortrait

      ],
      // 上传页面传递的文本
      inputText: this.props.navigation.state.params.inputText
    };
  }

  componentDidMount = () => {
  }


  render() {
    return (
      <View style={{ flex: 1 }}>
        {/* 导航栏 */}
        <NavBar
          navigation={this.props.navigation}
          title={this.state.title}
          titleColor={"black"}
          backgroundColor={"white"}
        />
        <View style={styles.padlr}>
          {/* 相册展示 */}
          <View style={styles.row}>
            {this.state.detailsDatas.map((item, index) => (
              <View style={styles.item} key={index}>
                <Image style={styles.systemPrompt} source={{ uri: item }} />
              </View>
            ))}
          </View>
          {/* 详情描述 */}
          <View style={styles.descriptionInformation}>
            <Image
              source={require('../../assets/images/iconResources/Frame11.png')}
              style={styles.iconStyle}
            />
            <Text
              style={styles.information}
            >
              {this.state.inputText}
            </Text>
          </View>
        </View>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 32,
    backgroundColor: 'transparent'
  },
  padlr: {
    // paddingLeft: 15,
    // paddingRight: 15,
    flexDirection: "column",
    justifyContent: "space-around",
    backgroundColor: "white",
    flex: 1
  },
  row: {
    flexDirection: "row",
    justifyContent: "space-between",
    flexWrap: "wrap"
  },
  item: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginTop: 10,
    width: "100%",
    height: 450
  },
  systemPrompt: {
    width: "100%",
    height: "100%"
  },
  descriptionInformation: {
    marginTop: 20,
    // marginBottom: 20,
    padding: 10,
    flexDirection: "row",
    alignItems: "center",
    // justifyContent: 'center',
    borderBottomWidth: 1,
    borderBottomColor: "rgb(220,220,220)",
  },
  iconStyle: {
    width: 20,
    // height: 20,
    // marginTop: 15,
    marginRight: 10
  },
  information: {
    color: "#333",
    fontSize: 15,
    width: "100%"
  },
})